<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./dist/index.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/api.js"></script>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div id="nav-notice-box">
     <nav>
         <div id="header">
        <a href="index.html"></a>
        <div class="login-regin"><span onclick="fnlog(login)">登录</span>/<span onclick="fnregn(regin)">注册</span></div>
        <div class="list-cart" onclick="tocart()">购物车<span></span></div>
        <div  class="heard-box box-msg"><span></span></div>
        <div  class="heard-box box-serach"><span></span></div>
        <div  class="heard-box box-question"><span></span></div>
         </div>
         <div id="login">
            <div class="login-left">
                 <h1>还未注册？</h1>
                 <button onclick="fnregn(regin)" >注册账户</button>     
            </div>
            <div class="login-right">
                <h1>已经成为会员？</h1>
                <input type="text" class="ipt-id" placeholder="请输入账号" onblur="fnloginid()"><span></span><br>
                <input type="password" class="ipt-pw" placeholder="请输入密码" onblur="fnloginpw()"><span></span>
                <p><input type="checkbox" />一旦登录，即表明您同意匡威更新的 隐私政策和使用规则</p>
                <button id="login-btn">登录</button>
            </div>
            <div class="login-bottom" onclick="fnl(login)"></div>
        </div>
        <div id="regin">
            <div class="regin-left">
                <input type="text" placeholder="请输入手机号" class="reg-phone" onblur="fnphone()"><span></span><br>
                <input type="text" placeholder="请输入邮箱" class="reg-mail" onblur="fnmail()"><span></span><br>
            </div>
            <div class="regin-right">
                <input type="text" placeholder="请输入账号名称" class="reg-id" oninput="fnregid()" onblur="fnjudgeid()"><span></span><br>
                <input type="password" placeholder="请输入密码" class="reg-pw" onblur="fnregpw()"><span></span><br>
                <input type="password" placeholder="请确认密码" class="reg-pw-judge" onblur="fnpwjudge()"><span></span><br>
                <button id="regin-btn" onclick="fnreg()">注册</button>
            </div>
            <div class="regin-bottom" onclick="fnl(regin)"></div>
        </div>
     </nav>

     <div id="nav-content">
         <ul>
             <li>
                 <a href="#">男的<p></p></a> 
                 <div id="nav-expanded">
                <ul class="nav-expanded-top">
                   <li><img src="./img/twolist-man/男的踩的.jpg" alt=""> 踩的</li>
                   <li><img src="./img/twolist-man/男的穿的.jpg" alt=""> 穿的</li>
                   <li><img src="./img/twolist-man/男的裤装.jpg" alt=""> 裤装</li>
                   <li><img src="./img/twolist-man/男的戴的.jpg" alt=""> 戴的</li>
                   <li><img src="./img/twolist-man/人气返场.jpg" alt=""> 腰果花</li>
                   <li><img src="./img/twolist-man/小白鞋.jpg" alt=""> 小白鞋</li>
                   <li><img src="./img/twolist-man/CDG.jpg" alt=""> 川久保玲</li>
                </ul>
                <ul class="nav-expanded-bottom">
                   <li><img src="./img/twolist-man/男的经典款.jpg" alt=""> 经典款</li>
                   <li><img src="./img/twolist-man/男的chuck70.jpg" alt=""> CHECK 70</li>
                   <li><img src="./img/twolist-man/男的allstar.jpg" alt=""> ALL STAR</li>
                   <li><img src="./img/twolist-man/JP.jpg" alt=""> JACK PURCELL</li>
                   <li><img src="./img/twolist-man/onestar_20210323222206.jpg" alt=""> ONE STAR</li>
                   <li><img src="./img/twolist-man/男的proleather.jpg" alt=""> PRO LEATHER</li>
                   <li><img src="./img/twolist-man/cons.jpg" alt=""> CONS</li>
                </ul>
                 </div>
             </li>
             <li>
                 <a href="#">女的<p></p></a>
                 <div id="nav-expanded">
                    <ul class="nav-expanded-top">
                       <li><img src="./img/twolist-women/woman_ftw_nav_210324.jpg" alt=""> 踩的</li>
                       <li><img src="./img/twolist-women/woman_app_nav_210324.jpg" alt=""> 穿的</li>
                       <li><img src="./img/twolist-women/woman_bottom_nav_210324_rev.jpg" alt=""> 裤装</li>
                       <li><img src="./img/twolist-women/woman_acc_nav_210324.jpg" alt=""> 戴的</li>
                       <li><img src="./img/twolist-women/人气返场.jpg" alt=""> 腰果花</li>
                       <li><img src="./img/twolist-women/小白鞋.jpg" alt=""> 小白鞋</li>
                       <li><img src="./img/twolist-women/CDG.jpg" alt=""> 川久保玲</li>
                    </ul>
                    <ul class="nav-expanded-bottom">
                       <li><img src="./img/twolist-women/women_core_nav_210324.jpg" alt=""> 经典款</li>
                       <li><img src="./img/twolist-women/women_ct70_nav_210324.jpg" alt=""> CHECK 70</li>
                       <li><img src="./img/twolist-women/women_ctas_nav_210324.jpg" alt=""> ALL STAR</li>
                       <li><img src="./img/twolist-women/women_jp_nav_210324.jpg" alt=""> JACK PURCELL</li>
                       <li><img src="./img/twolist-women/women_os_nav_210324.jpg" alt=""> ONE STAR</li>
                       <li><img src="./img/twolist-women/women_pl_nav_210324_20210407112918.jpg" alt=""> PRO LEATHER</li>
                       <li><img src="./img/twolist-women/women_bb_nav_210324_20210407113000.jpg" alt=""> CONS</li>
                    </ul>
                 </div>   
             </li>
             <li>
                 <a href="#">儿童<p></p></a>
                 <div id="nav-expanded">
                    <ul class="nav-expanded-top">
                       <li><img src="./img/twolist-kids/1-4-v2.png" alt=""> <h2>婴童</h2><p>1-4岁</p>  </li>
                       <li><img src="./img/twolist-kids/4-8-v1.jpg" alt=""> <h2>儿童</h2><p>4-8岁</p></li>
                       <li><img src="./img/twolist-kids/4-12-v1.jpg" alt=""> <h2>小童</h2><p>8-12岁</p></li>
                    </ul>
                 </div>
             </li>
             <li>
                 <a href="#">折扣优惠<p></p></a>
                 <div id="nav-expanded">
                    <ul class="nav-expanded-top">
                       <li><img src="./img/twolist-counts/热卖.jpg" alt=""> <h2>男的</h2></li>
                       <li><img src="./img/twolist-counts/299专区.jpg" alt=""> <h2>女的</h2></li>
                       <li><img src="./img/twolist-counts/热卖.jpg" alt=""> <h2>儿童</h2></li>
                    </ul>
                 </div>
             </li>
             <li>
                 <a href="#">热销榜<p></p></a>
                 
             </li>
             <li>
                 <a href=" #">店铺分布<p></p></a>
                 
             </li>
         </ul>
     </div>  
</div>
 <div style="width: 100%;height: 130px;"></div>

     <div id="notice"  class="swiper-container swiper-container1">
         <div class="swiper-wrapper">
            <div class="swiper-slide">
                <article>尊敬的客户您好，我们店铺不会泄露您的任何消费信息，敬请放心。另外，我们也不会主动要求获取、收集、使用任何消费者的金融消费类信息（如：信用卡信息）。如果接到索取以上信息的电话，是属于诈骗电话，请勿相信，以防个人的钱财损失。如您对订单有疑问，请联系在线客服。</article>
            </div>
            <div class="swiper-slide">
                <article>因疫情、暴雨天气等影响，发往河南、新疆、云南、广东、江苏等部分地区暂停揽收或配送有所延迟，联系客服了解详情，给您带来不便敬请谅解。</article>
            </div>
         </div> 
     </div>
     <!-- 轮播图 -->
     <div id="ad" class="swiper-container swiper-container2">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="img/lunbotu/PC小程序.jpg" alt=""  />
              </div>
              <div class="swiper-slide">
                <img src="img/lunbotu/BS_PC_1.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="img/lunbotu/gxnextpc.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="img/lunbotu/PC.jpg" alt=""  />
              </div>
              <div class="swiper-slide">
                  <img src="img/lunbotu/KV_PC.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="img/lunbotu/CXKVBS.jpg" alt="" />
              </div>
            </div>
                 <div class="swiper-button-prev"></div>
                 <div class="swiper-button-next"></div>
     </div>
     <div id="ad-list">
 <div  class="swiper-pagination"></div>
     </div>
     <div id="p-instructions">
         <span></span>
         <h1>热卖单品</h1>
         <span></span>
     </div>
     <div id="p-list" >
         <div class="p-list-box" onmouseleave="fnleave(this)">
             <h2>男的踩的</h2>
             <div><img src="https://image.converse.com.cn/static/home/homepage/top_02_1203.jpg?2021082001" alt=""></div>
         </div>
         <div class="p-list-box"  onmouseleave="fnleave(this)">
            <h2>女的踩的</h2>
            <div><img src="https://image.converse.com.cn/static/home/homepage/top_01_1203.jpg?2021082001" alt=""></div>
        </div>
        <div class="p-list-box"  onmouseleave="fnleave(this)">
            <h2>穿的</h2>
            <div><img src="https://image.converse.com.cn/static/home/homepage/top_01_05.jpg?2021082001" alt=""></div>
        </div>
        <div class="p-list-box"  onmouseleave="fnleave(this)">
            <h2>戴的</h2>
            <div><img src="https://image.converse.com.cn/static/home/homepage/top_01_07.jpg?2021082001" alt=""></div>
        </div>
     </div>
     <div id="p-list-box-menu">
        <div class="menu-container">
            <div class="menu-box"><img src="https://image.converse.com.cn/images/homepage/active.png" alt=""></div>
        </div>
     </div>
     <div id="product-list">
         <div class="list-product">
         </div>
         <div class="view-all">
             <div class="view-all-box">
              查看所有男的踩的最新商品
             </div>
         </div>
     </div>
     <div id="p-instructions">
        <span></span>
        <h1>新品推荐</h1>
        <span></span>
     </div>
     <div id="p-new-list">
        <div class="list-product">
         </div>
         <div class="list-product">
         </div>
     </div>
     <div id="special">
             <div class="spl-img"><img src="https://image.converse.com.cn/static/home/logo-icon.png" alt=""></div>
             <div class="spl-title">街头先型</div>
     </div>
     <div id="spl-ad">
             <div class="spl-ad-box">
                 <div class="spl-ad-box-img">
                     <img src="https://image.converse.com.cn/static/touts/1_%E5%A4%8F%E6%97%A5%E8%89%B2%E5%BD%A9.jpg" alt="">
                 </div>
                 <h1>夏日色彩</h1>
                 <div class="spl-more">
                     <a>查看更多</a>
                 </div>
             </div>
             <div class="spl-ad-box">
                <div class="spl-ad-box-img">
                    <img src="https://image.converse.com.cn/static/touts/1_%E5%A4%8F%E6%97%A5%E8%89%B2%E5%BD%A9.jpg" alt="">
                </div>
                <h1>夏日色彩</h1>
                <div class="spl-more">
                    <a>查看更多</a>
                </div>
             </div>
     </div>
     <div id="special">
            <div class="spl-img"><img src="https://image.converse.com.cn/static/home/logo-icon.png" alt=""></div>
            <div class="spl-title">至酷精选 玩转潮流</div>
     </div>
     <div id="spl-ad-two">
            <div class="spl-ad-two-box">
                <div class="spl-ad-two-box-img">
                    <img src="https://image.converse.com.cn/static/touts/1_all%20star.jpg" alt="">
                </div>
                <h1>ALL STAR 夏日新色</h1>
                <div class="spl-two-more">
                    <a>查看更多</a>
                </div>
             </div>
             <div class="spl-ad-two-box">
                <div class="spl-ad-two-box-img">
                    <img src="https://image.converse.com.cn/static/touts/1_all%20star.jpg" alt="">
                </div>
                <h1>ALL STAR 夏日新色</h1>
                <div class="spl-two-more">
                    <a>查看更多</a>
                </div>
             </div>
             <div class="spl-ad-two-box">
                <div class="spl-ad-two-box-img">
                    <img src="https://image.converse.com.cn/static/touts/1_all%20star.jpg" alt="">
                </div>
                <h1>ALL STAR 夏日新色</h1>
                <div class="spl-two-more">
                    <a>查看更多</a>
                </div>
             </div>
     </div>
     <div id="information">
         <h1>关注CONVERSE</h1>
         <p>Converse同时活跃在各类社交网络平台，点击下列你所喜爱的常用社交平台，密切关注Converse的最新产品与资讯。</p>
         <span class="weibo"></span>
         <span class="weixin"></span>
     </div>
     <div id="sitemap">
         <div class="sitemap-til"></div>
         <div class="sitemap-detail">
            <dl>
                <dt>
                    <a href="">男的</a>
                </dt>
                <dd class="other">
                    <a href="">CHUCK TAYLOR ALL STAR</a>
                </dd>
                <dd class="other">
                    <a href="" >CONVERSE CONS</a>
                </dd>
                <dd class="other">
                    <a href="">JACK PURCELL</a>
                </dd>
                <dd  class="other">
                    <a href="">CHUCK II</a>
                </dd>
                <dd class="other">
                    &nbsp; 
                </dd>
                <dd>
                    <a href="">踩的</a>
                </dd>
                <dd>
                    <a href="">穿的</a>
                </dd>
                <dd>
                    <a href="">戴的</a>
                </dd>
                <dd>
                    <a href="">优惠</a>
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="">女的</a>
                </dt>
                <dd class="other">
                    <a href="">CHUCK TAYLOR ALL STAR</a>
                </dd>
                <dd class="other">
                    <a href="">CONVERSE CONS</a>
                </dd>
                <dd class="other">
                    <a href="">JACK PURCELL</a>
                </dd>
                <dd class="other">
                    <a href="">CHUCK II</a>
                </dd>
                <dd class="other">
                    &nbsp; 
                </dd>
                <dd>
                    <a href="">踩的</a>
                </dd>
                <dd>
                    <a href="">穿的</a>
                </dd>
                <dd>
                    <a href="">戴的</a>
                </dd>
                <dd>
                    <a href="">优惠</a>
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="">儿童</a>
                </dt>
                <dd class="other">
                    <a href="">CHUCK TAYLOR ALL STAR</a>
                </dd>
                <dd class="other">
                    <a href="">CONVERSE CONS</a>
                </dd>
                <dd class="other">
                   &nbsp;
                </dd>
                <dd class="other">
                    &nbsp; 
                </dd>
                <dd class="other">
                    &nbsp; 
                </dd>
                <dd>
                    <a href="">踩的</a>
                </dd>
                <dd>
                    <a href="">穿的</a>
                </dd>
                <dd>
                    <a href="">戴的</a>
                </dd>
                <dd>
                    <a href="">优惠</a>
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="">GLONAL</a>
                </dt>
    
                <dd class="other">
                    <a href="">CONVERSE GLOBAL SITES</a>
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="">我的账户</a>
                </dt>
                <dd>
                    <a href="">会员中心</a>
                </dd>
                <dd>
                    <a href="">现有订单</a>
                </dd>
                <dd>
                    <a  href="">过去订单</a>
                </dd>
                <dd>
                    <a href="">退换货</a>
                </dd>
                <dd>
                    <a href="">账户设置</a>
                </dd>
                <dd>
                    <a href="">地址簿</a>
                </dd>
                <dd>
                    <a href="">我的优惠券</a>
                </dd>
                <dd>
                    <a href="">我的收藏</a>
                </dd>
                <dd>
                    <a href="">我的评论</a>
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="">帮助和购物指南</a>
                </dt>
                <dd>
                    <a href="">账户</a>
                </dd>
                <dd>
                    <a href="">订单</a>
                </dd>
                <dd>
                    <a href="">尺码</a>
                </dd>
                <dd>
                    <a href="">退货和退款</a>
                </dd>
                <dd>
                    <a href="">换货</a>
                </dd>
                <dd>
                    <a href="">配送</a>
                </dd>
                <dd>
                    <a href="">联系我们</a>
                </dd>
                <dd>
                    <a href="">常见问题</a>
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="">CONVERSE 小程序</a>
                </dt>
                <dd>
                    <img src="http://image.converse.com.cn/images/mp-qrcode.png" width="110" alt="">
                </dd>
            </dl>
            <dl>
                <dt>
                    <a href="">NIKE</a>
                </dt>
                <dd>
                    <a href="">NIKE+</a>
                </dd>
                <dd>
                    <a href="">JORDAN</a>
                </dd>
            </dl>
         </div>
     </div>
     <div id="footer-wrapper">
            <ul class="footer-list">
                <li><a href="">关于我们</a></li>
                <li><a href="">帮助和购物指南</a></li>
                <li><a href="">隐私政策</a></li>
                <li><a href="">使用规则</a></li>
            </ul>
            <div class="footer-logo">
             <img src="https://image.converse.com.cn/images/commons/header-footer-new2.png" alt="">
            </div>
            <div class="footer-messege">
                <span>
                    @匡威体育用品（中国）有限公司 保留所有权利 
                    <a>沪ICP备11044134号-2</a>
                    <img src="//image.converse.com.cn/images/homepage/beiAn.png">沪公网安备 31011002001667号 
                    <a href=""><img src="//image.converse.com.cn/images/commons/business-license.png">电子营业执照 公司证照</a></span>  
            </div>
            
            <div class="tip-for-fraud">            
                       <img src="//image.converse.com.cn/images/cautionIcon.png">
                       <!-- <span>亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听。</span> -->   
                </div>
        
    </div>
    <script src="./js/index.js"></script>

</body>
</html>